<template>
    <div class="student">
        <register></register>
        <div class="student_content">
            <div class="content_self">
                <p class="tit">学员列表</p>
                <div class="student_lists">
                    <!--表格-->
                    <el-table ref="multipleTable" :data="tableData" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column align="center" type="selection" width="60" />
                        <el-table-column align="center" property="userId" label="用户ID" width="140" />
                        <el-table-column align="center" property="name" label="用户昵称" width="120" />
                        <el-table-column align="center" property="tel" label="手机号" width="140" />
                        <el-table-column align="center" property="paid" label="付费金额" width="120" />
                        <el-table-column align="center" property="count" label="订单数量" width="100" />
                        <el-table-column align="center" label="付费时间" width="160">
                            <template #default="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="center" label="用户禁用" width="120">
                            <el-switch v-model="value" class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #EDF2F5" />
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="140">
                            <template #default="scope">
                                <div class="operation">
                                    <div class="view" @click="view(scope)">编辑</div>
                                    <div class="cancelOrDelete" @click="canOrDel(scope)">删除</div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--全选操作及分页-->
                <div class="footer_operation">
                    <div class="l_box">
                        <el-checkbox v-model="checked1" @change="toggleSelection(tableData)" label="全选" size="large" />
                        <span class="batch_export">批量导出</span>
                    </div>
                    <div class="r_box">
                        <span>共10页,100数据</span>
                        <el-config-provider>
                            <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" small
                                :background="background" layout="prev,pager,next,jumper,slot" :total="1000"
                                hide-on-single-page>
                            </el-pagination>
                        </el-config-provider>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import register from '../../components/userRegister/index.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElTable } from 'element-plus'
import { ref } from 'vue'
let locale = ref(zhCn)
const value = ref(false)
const multipleTableRef = ref()

const tableData = ref([
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    },
    {
        name: 'Tom',
        userId: 123,
        tel: '15434320932',
        paid: '88.00',
        count: '13',
        date: '2016-05-03',
        forhidden: false,
    }
])
//分页
const pageSize3 = ref(100)
const currentPage3 = ref(1)
let background = ref(true)
let checked1 = ref(false)
const multipleTable = ref(null)
const multipleSelection = ref([])
const toggleSelection = (rows) => {
    if (rows) {
        rows.forEach((row) => {
            multipleTable.value.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTable.value.clearSelection()
    }
}
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(val);
    checked1.value = val.length == 10 ? true : false
}

</script>

<style scoped lang="less">
.operation {
    display: flex;
    justify-content: space-around;
}

.view {
    color: rgba(43, 193, 123, 1);
}

.cancelOrDelete {
    color: rgba(251, 84, 81, 1);
}

/*分页样式*/


.student_content {
    width: 100%;
    height: 772px;
    background: #fff;

    .content_self {
        width: 1184px;
        height: 772px;
        background: #fff;
        padding: 35px 40px 0;
        box-sizing: border-box;

        .tit {
            font-size: 16px;
        }

        .student_lists {
            width: 1104px;
            height: 575px;
            margin-top: 40px;
        }

        /*底部分页*/
        .footer_operation {
            width: 1104px;
            box-sizing: border-box;
            margin-top: 20px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;

            .l_box {
                .batch_export {
                    color: rgba(43, 193, 123, 1);
                    font-size: 14px;
                    margin-left: 10px;
                    cursor: pointer;
                }
            }

            .r_box {
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .demo-pagination-block+.demo-pagination-block {
                    margin-top: 10px;
                }

                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }

    }
}
</style>